
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图书排行榜</title>

    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap 样式文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css">
    <!-- 引入字体图标样式 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/font-awesome.min.css">
    <!-- 引入我们自己的首页样式文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css">
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/jquery.min.js"></script>
    <!-- <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> -->
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>

<%--这里使用相对路径识别不了  所以用${pageContext.request.contextPath}--%>
<%-- --%>



    <title>Document</title>



</head>

<body>

<button id="button1" style="background-color: red;"><h3>图片可视化</h3></button>
<button id="button2" style="background-color: #0d6aad;"><h3>表格可视化</h3></button>


<%--<input type="button" value="返回首页" onclick="run()">--%>



<c:if test="${lwb == 'lwb'}">
<td style="text-align: center;" colspan="10">
    <a class="btn btn-mini btn-danger" href="http://localhost:8082/cloudlibrary">返回</a>
</td>
</c:if>

<%--<a style="display: block;text-align: -webkit-left;position: absolute;right: 75px;bottom: 125px;background-color: #b3abab" class="active" href="http://localhost:8082/cloudlibrary/"><h3>返回首页</h3></a>--%>
<center> <h1 style="font-size: 80px;border-width:5px;color: rgb(<%=java.lang.Math.round(java.lang.Math.random()*240)%>,<%=java.lang.Math.round(java.lang.Math.random()*240)%>,<%=java.lang.Math.round(java.lang.Math.random()*240)%>);">
    <c:if test="${nature1 == 'end'}">
        完结排行榜
    </c:if>

    <c:if test="${nature1 == 'humanqi'}">
        人气排行榜
    </c:if>


    <c:if test="${nature1 == 'new'}">
        最新排行榜
    </c:if>


    <c:if test="${nature1 == 'praise'}">
        点赞排行榜
    </c:if>
    <c:if test="${nature1 == 'recommend'}">
        推荐排行榜
    </c:if>
    <c:if test="${nature1 == 'storeup'}">
        收藏排行榜
    </c:if>
    <c:if test="${nature1 == 'topsearch'}">
        热搜排行榜
    </c:if>

</h1></center>

<br/>
<br/>
<div id="yangshi"  style="display: none;float: right">
<button id="yangshi1" style="background-color:red">表格样式一</button>
<button id="yangshi2" style="background-color: yellow">表格样式二</button>
    <button id="yangshi3" style="background-color: yellow">表格样式三</button>

</div>


<!-- 潮流穿搭小技巧 -->
<div id="one">
<div class="trend-skill  mb-8">
    <div class="container w-100">
        <div class="row">
            <c:forEach items="${pageResult.rows}" var="nature">
                <div class="card" style="width: 15rem;">
                    <img class="card-img-top" src="${pageContext.request.contextPath}${nature.src}" alt="Card image cap">
                    <div class="card-body">

                        <button type="text" style="background-color: red">排名:${nature.grade}</button>

                        <h5 class="card-title">
                            <c:forEach items="${pageResult1.rows}" var="nature1">
                                <c:if test="${nature.bookid == nature1.id}">
                                    书名:${nature1.name}
                                </c:if>
                            </c:forEach>
                        </h5>
<%--                        下面者一条可以作为介绍信息--%>
<%--                        <p class="card-text">排名${nature.grade} text to build on the card title and make up the bulk of the card's content.</p>--%>
<%--                        --%>

                        <a href="#" class="btn btn-primary">查看详情</a>
                    </div>
                </div>
            </c:forEach>

        </div>
    </div>
</div>
</div>

<div id="two" style="display:none">
<table id="dataList" class="table table-bordered table-striped table-hover dataTable text-center">
    <thead>
    <tr  id="dataList1" style="background-color: #00c0ef" class="text-center">
        <th>图书id</th>
        <th>图书名称</th>
        <th>图书图片路径</th>
        <th>图书排名</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${pageResult.rows}" var="nature">
        <tr>
            <td>${nature.bookid}</td>
            <td>

                <c:forEach items="${pageResult1.rows}" var="nature1">
                <c:if test="${nature.bookid == nature1.id}">
                    ${nature1.name}
                </c:if>
                </c:forEach>
            </td>
            <td>${nature.src}</td>
            <td>${nature.grade}</td>
        </tr>
    </c:forEach>
    </tbody>
</table>
</div>








<script>
    document.getElementById("button1").onclick=function (){

document.getElementById("one").style.display="block";
document.getElementById("yangshi").style.display="none";
document.getElementById("button1").style.backgroundColor="red";
document.getElementById("two").style.display="none";
document.getElementById("button2").style.backgroundColor="#0d6aad";

    }

    document.getElementById("button2").onclick=function (){
        document.getElementById("one").style.display="none";
        document.getElementById("yangshi").style.display="block";
        document.getElementById("button1").style.backgroundColor="#0d6aad";

        document.getElementById("two").style.display="block";
        document.getElementById("button2").style.backgroundColor="red";

    }
    document.getElementById("yangshi1").onclick=function (){
   this.style.backgroundColor="red";
        document.getElementById("yangshi2").style.backgroundColor="yellow";
        document.getElementById("yangshi3").style.backgroundColor="yellow";
        document.getElementById("dataList").className="table table-bordered table-striped table-hover dataTable text-center";
        document.getElementById("dataList1").style.backgroundColor="#00c0ef";

    }


    document.getElementById("yangshi2").onclick=function (){
        this.style.backgroundColor="red";
        document.getElementById("yangshi1").style.backgroundColor="yellow";
        document.getElementById("yangshi3").style.backgroundColor="yellow";
        document.getElementById("dataList1").style="";
        document.getElementById("dataList").className="table table-bordered table-striped table-dark dataTable text-center";
    }
    document.getElementById("yangshi3").onclick=function (){
        this.style.backgroundColor="red";
        document.getElementById("yangshi1").style.backgroundColor="yellow";
        document.getElementById("yangshi2").style.backgroundColor="yellow";
        document.getElementById("dataList1").style="";
        document.getElementById("dataList").className="table  table-bordered table-striped";
    }


</script>
</body>

</html>